<template>
  <div class="container">
    <Header></Header>
    <Nav></Nav>
    <div>
      <div class="content">
        <div class="left">
          <img src="../assets/studyCenter_ms1.jpg" style="width:199px;height: 264px;margin-top: 71px;"
            v-if="this.teacher_id === 7" alt="">
          <img src="../assets/studyCenter_ms2.jpg" style="width:199px;height: 264px;margin-top: 71px;"
            v-if="this.teacher_id === 8" alt="">
          <img src="../assets/studyCenter_ms3.png" style="width:199px;height: 264px;margin-top: 71px;"
            v-if="this.teacher_id === 9" alt="">
          <img src="../assets/studyCenter_ms4.jpg" style="width:199px;height: 264px;margin-top: 71px;"
            v-if="this.teacher_id === 10" alt="">
          <img src="../assets/studyCenter_ms5.png" style="width:199px;height: 264px;margin-top: 71px;"
            v-if="this.teacher_id === 11" alt="">
          <img src="../assets/studyCenter_ms6.jpg" style="width:199px;height: 264px;margin-top: 71px;"
            v-if="this.teacher_id === 12" alt="">
        </div>
        <div class="right">
          <p style="margin-top: 66px;">{{ this.teacher_title }}</p>
          <span>简介：</span>
          <p>{{ this.teacher_troduction }}</p>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import Footer from '../components/footer.vue'
import eventBus from '../views/eventBus'
export default {
  name: 'main_teacher',
  components: {
    Header,
    Nav,
    Footer
  },
  data() {
    return {
      teacher_title: [],
      teacher_troduction: [],
      teacher: 0,
      teacher_id: [],
    }
  },
  created() {
    eventBus.$on('teacher_title', item => {
      this.teacher_title = item
      // console.log(this.teacher_title)
    }),
      eventBus.$on('teacher_troduction', item => {
        this.teacher_troduction = item
        // console.log(this.teacher_troduction)
      }),
      eventBus.$on('teacher_id', item => {
        this.teacher_id = item
        console.log(this.teacher_id)
      })
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style scoped>
.content {
  margin-left: 300px;
}

.right,
.left {
  display: inline-block;
}

.right {
  position: absolute;
  width: 500px;
  height: 400px;
}

.left {
  width: 200px;
  height: 400px;
}
</style>
